import type { Meta, StoryObj } from "@storybook/react"
import { DatePicker, Space } from "antd"
import { useState } from "react"
import { IntlProvider } from "react-intl"

import TimeSelectionShortcuts from "@/components/common/timeSelectionShortcuts"
import { localeConfig } from "@/locales"
import { rangeToday, rangeTomorrow, rangeYesterday, TimeRange } from "@/utils"

const { RangePicker } = DatePicker

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
	title: "TimeSelectionShortcuts",
	component: TimeSelectionShortcuts,
	parameters: {
		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
		layout: "centered"
	},
	// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
	tags: ["autodocs"]
	// More on argTypes: https://storybook.js.org/docs/api/argtypes
	// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
} satisfies Meta<typeof TimeSelectionShortcuts>

export default meta
type Story = StoryObj<typeof meta>

const decorators = [
	(Story: any) => {
		const locale = "zh_CN"

		return (
			<IntlProvider locale={locale.split("_")[0]} messages={localeConfig[locale]}>
				<Story />
			</IntlProvider>
		)
	}
]

const rangePickerDecorators = [
	() => {
		const locale = "zh_CN"
		const [value, setValue] = useState<TimeRange | undefined>()

		return (
			<IntlProvider locale={locale.split("_")[0]} messages={localeConfig[locale]}>
				<Space direction="vertical">
					<RangePicker
						value={value}
						onChange={v => {
							setValue(v as TimeRange)
						}}
					/>
					<TimeSelectionShortcuts onChange={setValue} />
				</Space>
			</IntlProvider>
		)
	}
]

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
	decorators,
	args: {}
}

export const Options: Story = {
	decorators,
	args: {
		options: [
			{ label: "Yesterday", value: rangeYesterday() },
			{ label: "Today", value: rangeToday() },
			{ label: "Tomorrow", value: rangeTomorrow() }
		]
	}
}

export const WithRangePicker: Story = {
	decorators: rangePickerDecorators
}
